 <template>
  <div class="subject-tags">
    <div class="app-tags">
      <el-card shadow='never'>
        <!-- 搜索 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="启用" value="shanghai"></el-option>
              <el-option label="禁用" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">清除</el-button>
          </el-form-item>
          <el-button class="filter-item fr" size="small" style="margin-left: 10px;" type="primary" icon="el-icon-edit">新增用户</el-button>
        </el-form>
        <!-- 数据记录 -->
        <el-alert type="info" class="alert" :closable="false" show-icon></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="200">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称" width="200">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="200">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="200">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="50">
            <template v-slot="{row}">
              <span>{{row.state?'启用':'禁用'}}</span>
            </template>
          </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column align="center" label="操作" width="280" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!-- 删除事件 -->
              <el-button type="primary" size="mini">删除</el-button>
              <el-button type="primary" size="mini">
                <span v-if="scope.row.state==0" @click="disableState(scope.row)">启用</span>
                <span v-else @click="enableState(scope.row)">禁用</span>
              </el-button>
              <!-- 修改功能 -->
              <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <!-- <div class="pagination">
          <div class="pages">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(requestParameters.page)" :total="(total)" :page-size="Number(requestParameters.pagesize)" :page-sizes="[10,20,30, 50]" layout="sizes, prev, pager, next, jumper"></el-pagination>
          </div>
        </div> -->
        <!-- end -->
        <!-- 新增标签弹层 -->
      </el-card>
    </div>
  </div>

</template>

<script>
import { list, changeState } from '../../api/hmmm/tags'

export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      tableData: []
    }
  },
  methods: {
    async getList () {
      const { data: res } = await list(this.requestParameters)
      console.log(res)
      this.tableData = res.items
    },
    async enableState (data) {
      console.log(data)
      const ret = await changeState(data.id)
      console.log(ret)
      data.state = 0
    },
    async disableState (data) {
      console.log(data)
      const ret = await changeState(data.id)
      console.log(ret)
      // 判断值为0禁用，不为0就启用
      data.state = 1
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style>
</style>
